<template>
    <div class="product-container">
        <el-row>
            <el-col :span="24">
                <normal-filter :filterProps="filterProps" />
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addContent">添加产品</el-button>
        </el-row>
        <el-row class="table-container">
            <Table @sizeChange="sizeChange" :columnProps="columnProps" :tableData="tableData" :showHandle="true" :pagination="pagination" @currentPage="goCurrent" @delete="del" @modify="modify">
                <template slot-scope="scopes" slot="isHot">
                    <el-switch v-model="scopes.scope.row.isHot" @change="switchIsHot(scopes.scope.row)"> </el-switch>
                </template>
                <template slot-scope="scopes" slot="isBanner">
                    <el-switch v-model="scopes.scope.row.isBanner" @change="toggleBanner(scopes.scope.row)"> </el-switch>
                </template>
                <!-- <template slot-scope="scopes" slot="link">
                    <span style="margin-left: 20px">
                        <el-link @click="$router.push(`/product/data/${scopes.scope.row.id}`)" type="primary" :underline="false"> 添加数据 </el-link>
                    </span>
                </template> -->
                <!-- <template slot-scope="scopes" slot="link">
          <span style="margin-left: 20px">
            <el-link
              @click="toggleBanner(scopes.scope.row)"
              type="primary"
              :underline="false"
            >
              {{ scopes.scope.row.isBanner ? "停用滚动" : "启用滚动" }}
            </el-link>
          </span>
        </template> -->
            </Table>
        </el-row>
    </div>
</template>

<script>
    import normalFilter from "@/components/NormalFilter";
    import Table from "@/components/Table";
    import { getList, update, delItem, toggleBanner } from "@/api/product0";
    import { pagination, page } from "@/utils/enumConfig";
    import { Message } from "element-ui";

    export default {
        name: "Product0",
        components: {
            normalFilter,
            Table,
        },
        data() {
            const filterProps = {
                filterItems: [
                    {
                        type: "input",
                        id: "title",
                        title: "标题",
                        placeholder: "请输入",
                    },
                    {
                        type: "select",
                        title: "是否滚动",
                        id: "isBanner",
                        placeholder: "请选择",
                        width: 150,
                        options: [
                            {
                                title: "全部",
                                key: "",
                                value: "",
                            },
                            {
                                title: "是",
                                key: "1",
                                value: 1,
                            },
                            {
                                title: "否",
                                key: "0",
                                value: 0,
                            },
                        ],
                    },
                    {
                        type: "select",
                        title: "是否热销",
                        id: "isHot",
                        placeholder: "请选择",
                        width: 150,
                        options: [
                            {
                                title: "全部",
                                key: "",
                                value: "",
                            },
                            {
                                title: "是",
                                key: "1",
                                value: 1,
                            },
                            {
                                title: "否",
                                key: "0",
                                value: 0,
                            },
                        ],
                    },
                    {
                        type: "select",
                        title: "产品类型",
                        id: "productType",
                        placeholder: "请选择",
                        width: 200,
                        options: [
                            {
                                title: "全部",
                                key: "",
                                value: "",
                            },
                            {
                                title: "政信",
                                key: "1",
                                value: "政信",
                            },
                            {
                                title: "保险",
                                key: "0",
                                value: "保险",
                            },
                            {
                                title: "基金",
                                key: "3",
                                value: "基金",
                            },
                        ],
                    },
                ],
                onFilterChange: (value) => {
                    this.filterParam = value;
                    this.getList({
                        ...value,
                        ...page,
                    });
                },
            };
            const columnProps = [
                {
                    title: "产品ID",
                    dataIndex: "id",
                    key: "id",
                    width: 100,
                },
                {
                    title: "标题",
                    dataIndex: "name",
                    key: "name",
                    width: 400,
                    align: "left",
                },
                {
                    title: "封面图",
                    dataIndex: "coverUrl",
                    key: "coverUrl",
                    width: 200,
                    render: (record) => {
                        return `<img style="width:150px;height:80px;" src="${record.coverUrl}"></img>`;
                    },
                },
                {
                    title: "轮播图封面",
                    dataIndex: "bannerUrl",
                    key: "bannerUrl",
                    width: 200,
                    render: (record) => {
                        return `<img style="width:150px;height:80px;" src="${record.bannerUrl}"></img>`;
                    },
                },
                {
                    title: "是否滚动",
                    dataIndex: "isBanner",
                    key: "isBanner",
                    width: 120,
                    slot: true,
                },
                //   {
                //     title: "热销",
                //     dataIndex: "isHot",
                //     key: "isBanner",
                //     width: 150,
                //     render: (record) => {
                //       return `<span>${record.isHot === 1 ? "是" : "否"}</span>`;
                //     },
                //   },
                {
                    title: "是否热销",
                    dataIndex: "isHot",
                    key: "isHot",
                    width: 120,
                    slot: true,
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    width: 160,
                },
                {
                    title: "类型",
                    dataIndex: "productType",
                    key: "productType",
                },
                // {
                //     title: "状态",
                //     dataIndex: "status",
                //     key: "status",
                //     render: (record) => {
                //         let text = "";
                //         switch (record.status) {
                //             case 1:
                //                 text = "在售项目";
                //                 break;
                //             case 2:
                //                 text = "募集结束";
                //                 break;
                //             case 3:
                //                 text = "月兑付表";
                //                 break;
                //         }
                //         return `<span>${text}</span>`;
                //     },
                // },
            ];
            return {
                filterProps,
                columnProps,
                list: [],
                tableData: [],
                pagination: this.$_.cloneDeep(pagination),
                filterParam: null,
            };
        },
        async created() {
            let { pageIndex } = this.pagination;
            let param = {
                current: pageIndex,
            };
            this.getList(param);
        },
        methods: {
            addContent() {
                this.$router.push("/product0/add");
            },
            goCurrent(currentIndex) {
                console.log(currentIndex);
                let { pageSize, pageIndex } = this.pagination;
                let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
                this.getList(param);
            },
            sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
            modify({ id }) {
                this.$router.push({ path: `/product0/update/${id}` });
            },
            async toggleBanner({ id, isBanner }) {
                let res = await toggleBanner({ id, isBanner: isBanner ? 1 : 0 });
                if (res.code === 1) {
                    Message({
                        message: "状态更新成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    let { pageIndex } = this.pagination;
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async del({ id }) {
                let res = await delItem({ id });
                if (res.code === 1) {
                    let { pageIndex } = this.pagination;
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async getList(param) {
                let { records, size, total, current } = await getList(param),
                    page = this.pagination;
                this.pagination = {
                    ...page,
                    totalElements: total,
                    pageIndex: current,
                };
                records.forEach((item) => {
                    item.isHot = item.isHot == 1 ? true : false;
                    item.isBanner = item.isBanner == 1 ? true : false;
                });
                this.tableData = records;
            },
            async switchIsHot(item) {
                let res = await update({ id: item.id, isHot: item.isHot ? 1 : 0 });
                if (res && res.code === 1) {
                    Message({
                        message: "状态更新成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .product-container {
        width: 100%;
        height: 100%;
        padding: 20px;
        .table-container {
            margin-top: 20px;
        }
    }
</style>
